<!-- 商品详情页 -->
<template>
    <el-card style=" width: 1100px;height: 80%;margin: 5px auto;padding: 20px;background: #fff;">
        <div class="details-box">
            <img v-if="data.picture" :src="data.picture" alt="无法加载" />
            <img v-else src="@/assets/default.jpg" alt="" style="border:1px solid #f2f2f2;" />
            <div class="info">
                <h4 class="title">{{ data.title }}</h4>
                <div class="content" :title="data.content">{{ data.content }}</div>
                <span class="price">￥{{ data.price }}</span>
                <div class="time">
                    <span style="margin-right:30px;">发布时间：{{ time(data.createTime) }}</span>
                    <span>最近修改时间：{{ time(data.updateTime) }}</span>
                </div>
                <div class="item-style">
                    <div class="operation">
                        <div class="operation-item"><img src="@/assets/img/good.png" class="operation-img" alt="" /> 点赞
                        </div>
                        <div class="operation-item"><img src="@/assets/img/no-star.png" class="operation-img" alt="" />
                            收藏
                        </div>
                        <div class="operation-item"><img src="@/assets/img/fill-in.png" class="operation-img"
                                alt="" />评论
                        </div>
                    </div>
                    <div class="btn-content">
                        <el-button type="danger" @click="addShopcartClick" v-if="data.type == 'goods'">加入购物车</el-button>
                        <el-button type="danger" slot="reference" @click.once="changeInfo(item.orderId)"
                            v-show="data.type == 'needs'">联系买家
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex;justify-content: space-around;margin-top: 30px;">
            <div class="item-sales">{{ userType }}家姓名：<span class="sales-text">{{ updateUserData.nickName }}</span>
            </div>
            <div class="item-sales">{{ userType }}家地址：<span class="sales-text">{{ updateUserData.address }}</span>
            </div>
            <div class="item-sales">{{ userType }}家手机号码：<span class="sales-text">{{ updateUserData.phone }}</span>
            </div>
            <div class="item-sales">更新时间：<span class="sales-text">{{ time(updateUserData.updateTime) }}</span></div>
        </div>
        <el-button @click="comeBack" style="width: 120px;height:35px;line-height: 35px;margin-top: 50px;">
            <el-icon>
                <DArrowLeft />
            </el-icon>&nbsp; 返 &nbsp;回
        </el-button>
    </el-card>
</template>

<script setup>
import { selectOrderById } from "@/api/order";
import { selectUserByUsername } from "@/api/user";
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { addOrderToCart } from "@/api/cart";
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const data = ref({})
const updateUserData = ref({})
const userGoods = ref({})
const updateGooInfo = ref({})
const userType = ref('卖')

//格式化时间
const time = (value) => {
    let date = new Date(value);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    let h = date.getHours();
    h = h < 10 ? "0" + h : h;
    let m = date.getMinutes();
    m = m < 10 ? "0" + m : m;
    let s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "-" + MM + "-" + d + " " + h + ":" + m;
}

// 加载数据
const load = async () => {
    await selectOrderById({ orderId: route.query.orderId }).then((res) => {
        if (res.flag == true) {
            data.value = res.data
            if (data.value.type == 'goods') {
                userType.value = '卖'
            } else {
                userType.value = '买'
            }
        }
    })
    selectUserByUsername({ username: data.value.ownName }).then((res) => {
        if (res.flag == true) {
            updateUserData.value = res.data
        }
    })
}
load()

//返回首页
const comeBack = () => {
    router.back()
}


//添加到购物车
const addShopcartClick = () => {
    addOrderToCart({
        order_id: route.query.orderId
    }).then((res) => {
        if (res.flag == true) {
            ElMessage.success(res.message) 
        } else {
            ElMessage.success(res.message)
        }
    })
}


</script>

<style lang="scss" scoped>
.details-box {
    width: 1100px;
    height: 80%;
    margin: 5px auto;
    padding: 20px;
    padding-top: 10px;
    background: #fff;
    display: flex;
    text-align: left;
    justify-content: space-between;

    img {
        width: 360px;
        height: 300px;
        border-radius: 6px;
    }

    .info {
        position: relative;
        width: 680px;
        height: 300px;
        // box-shadow: 3px 3px 3px rgba(3, 0, 0, 0.07);
        border-radius: 6px;
        padding: 10px 20px;

        .title {
            font-size: 22px;
            font-weight: bold;
        }

        .content {
            height: 100px;
            border: 1px dashed #f2f2f2;
            line-height: 23px;
            padding: 5px 10px;
            /*超出的部分隐藏*/
            overflow: hidden;
            /*文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
            /*弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示文本的行数*/
            -webkit-line-clamp: 4;
            /*设置或检索伸缩盒对象的子元素排列方式*/
            -webkit-box-orient: vertical;
        }

        .price {
            color: red;
            font-size: 25px;
            font-weight: bold;
        }

        .time {
            margin-top: 5px;
            color: #999;
            display: flex;
            justify-content: flex-start;
        }

        .item-style {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-top: 5px;
            align-items: center;
        }
    }

    .operation {
        display: flex;
        margin-top: 10px;
        margin-right: 150px;

        .operation-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 10px;

            .operation-img {
                width: 20px;
                height: 20px;
                margin-bottom: 5px;
                border-radius: 6px;
            }
        }
    }

    .btn-content {
        margin-top: 10px;
    }

    .item-sales {
        color: #333 !important;
        line-height: 30px;
        max-height: 30px;

        .sales-text {
            color: #666;
        }
    }
}
</style>
